<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .strstyle{
            color: red;
            font-size: 20px;
            font-weight: 700;
            position: absolute;
            top: -50px;
        }
    </style>
</head>
<body>
    <h1>蛇形文字</h1>

    <hr>

    <script>
        var msg = '鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波';

        for (var i = 0; i < msg.length; i++) {
            document.write('<span id="str'+i+'" class="strstyle">');

            document.write(msg[i]);
            document.write('</span>');
        }

        //绑定鼠标移动事件
        
        document.onmousemove = function(e){
            e = e || window.event;
            document.title = 'X: '+e.x+'| Y:'+e.y;

            //让每个字之间 有时间延迟 依次去动
            //定时器 +循环
            
            var m = 0;
            var timer = setInterval(function(){
                if (m < msg.length){
                    snake(e.x, e.y, m);//调用文字运动轨迹
                    m++;
                }else{
                    //如果次数 大于或等于字数,则清除之前的定时
                    
                    clearInterval(timer);
                }
            },50)
        }

        //设定文字运动轨迹
        function snake(x, y, m){
            //获取每个span元素标签
            var span = document.getElementById('str'+m);
            span.style.left = x + (m*20) + 'px';
            span.style.top = y + 'px';
        }
    </script>
</body>
</html>